<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" charset="utf-8"/>
    <link rel="shortcut icon" href="http://tiannblog.oss-cn-shanghai.aliyuncs.com/images/logo_ico_48.ico"
          type="image/x-icon">
    <title>清汀鉴权</title>

    <link href="/admin/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/admin/static/css/style.css" rel="stylesheet">
    <style type="text/css">
        .form-signin, .form-signin h2.form-signin-heading {
            background: #f1f2f7;
            color: #797979;
            font-size: 25px;
        }

        .modal-sm {
            width: 350px;
        }

        span {
            font-size: 16px;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<div class="container">
    <form class="form-signin">
        <h2 class="form-signin-heading">请鉴权
            <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></h2>
        <label for="authCode" class="sr-only">鉴权码</label>
        <input type="text" id="authCode" class="form-control" placeholder="请输入鉴权码" required="" autofocus="">
        <button class="btn btn-lg btn-info btn-block" type="submit">提交</button>
    </form>
</div>

<!-- 模块选择框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" id="modal">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">鉴权成功，请选择要查看的模块</h4>
            </div>
            <div class="modal-body">
                <button type="button" class="btn btn-primary btn-block"
                        onclick="pageTo('http://box.tiann90.com/taas/');">TAAS系统
                </button>
                <button type="button" class="btn btn-primary btn-block" onclick="pageTo('http://yuyoutravel.com/');">
                    余悠官网
                </button>
            </div>
        </div>
    </div>
</div>

<script src="/admin/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("form").submit(function (e) {
            $.post("/admin/services/authorize.php", {"authCode": $("#authCode").val()}, function (data) {
                if (data != "1") {
                    $("button").popover({title: "鉴权失败！", content: "鉴权码过期或者失效", placement: "bottom"}).popover('show');
                    setTimeout(function () {
                        $("button").popover('destroy');
                    }, 1500);
                } else {
                    $('#modal').modal('show');
                }
            });
            return false;
        });

        $(".glyphicon").popover({
            content: "<div style='font-size: 15px;text-align: left;line-height: 20px'>访问本示例需要授权，如需查看<br>请发邮件申请：tiann@me.com<div>",
            trigger: "hover",
            html: true
        });
        $(".glyphicon").click(function () {
            var oInput = document.createElement('input');
            oInput.value = "tiann@me.com";
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display = 'none';
            $(this).tooltip({title: "邮件地址 复制成功", trigger: "manual"}).tooltip("show");
            setTimeout(function () {
                $(".glyphicon").tooltip("destroy");
            }, 1500);
        });
    });

    function pageTo(url) {
        location.href = url;
    }
</script>
</body>
</html>